<template>
  <div class="common-layout__avatar">
    <div class="back-img__cover" :style="avatarStyle"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from "vue";
import commonApi from "@/api/common";

const props = defineProps({
  avatar: {
    type: String,
    require: true,
  },
  size: {
    type: String,
    require: false,
    default: "30px",
  },
});
const avatarStyle = ref({});

const watchProps = watch(
  () => props,
  (val) => {
    const avatarPath = commonApi.getHeadshot(props.avatar!);
    avatarStyle.value = {
      backgroundImage: `url('${avatarPath}')`,
      width: props.size,
      height: props.size,
    };
  },
  {
    immediate: true,
    deep: true,
  }
);

onUnmounted(() => {
  watchProps();
});
</script>

<style lang="scss" scoped>
.common-layout__avatar {
  .back-img__cover {
    border-radius: 50%;
    border: 1px solid rgb(175, 175, 175);
  }
}
</style>
